<template>
  <div class="container">
    <div class="pickerType">
      <div class="type" :class="index == chooseIndex ? 'active_type' : 'type'" v-for="item, index in pickerTypeList"
        :key="index" @click="handleClick(item, index)">{{ item.label }}</div>
    </div>
    <div class="block">
      选择时间：
      <el-date-picker class="my-custom-datepicker" v-model="value" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
        v-show="type == 'date'" type="date" placeholder="选择日期" @change="handleChangeDate">
      </el-date-picker>
      <el-date-picker class="my-custom-datepicker" v-model="value" format="yyyy 第 MM 周" value-format="yyyy-MM-dd"
        v-show="type == 'week'" type="week" placeholder="选择周" @change="handleChangeDate">
      </el-date-picker>
      <el-date-picker class="my-custom-datepicker" v-model="value" format="yyyy 第 MM 月" value-format="yyyy-MM-dd"
        v-show="type == 'month'" type="month" placeholder="选择月" @change="handleChangeDate">
      </el-date-picker>
      <el-date-picker class="my-custom-datepicker" v-model="value" format="yyyy" value-format="yyyy-MM-dd"
        v-show="type == 'year'" type="year" placeholder="选择年" @change="handleChangeDate">
      </el-date-picker>
      <el-button class="btn" type="primary" icon="el-icon-search" @click="selectData">查 询</el-button>
    </div>
  </div>
</template>
<script>
import { formatDate, getWeekRange, getMonthRange, getYearRange } from "@/utils/filterTime"
import dataQueryApi from "@/api/dataQuery"
export default {
  data() {
    return {
      type: 'date',
      chooseIndex: 0,
      queryApi: dataQueryApi.dayReport,
      value: formatDate(new Date(), true),
      dateList: [],
      pickerTypeList: [
        {
          type: 'date',
          label: '日'
        }, {
          type: 'week',
          label: '周'
        }, {
          type: 'month',
          label: '月'
        }, {
          type: 'year',
          label: '年'
        },
      ]
    }
  },
  mounted() {
    this.getTime(new Date())
  },
  methods: {
    handleClick(val, index) {
      this.chooseIndex = index;
      this.type = val.type;
      this.getTime(new Date())
    },
    handleChangeDate(v) {
      this.getTime(v)
    },
    selectData() {
      this.getTime(v)
    },
    getTime(v) {
      let date = new Date(v);
      this.value = formatDate(date, true);
      if (this.type == 'date') {
        this.queryApi = dataQueryApi.dayReport
        this.dateList = [this.value, this.value]
      } else if (this.type == 'week') {
        this.queryApi = dataQueryApi.longReport
        this.dateList = [getWeekRange(date)[0], getWeekRange(date)[1]]
      } else if (this.type == 'month') {
        this.queryApi = dataQueryApi.longReport
        this.dateList = [getMonthRange(date)[0], getMonthRange(date)[1]]
      } else if (this.type == 'year') {
        this.queryApi = dataQueryApi.yearReport
        this.dateList = [getYearRange(v)[0], getYearRange(v)[1]]
      }
      this.$emit('getApi', this.queryApi)
      this.$emit('handleChangeDate', this.dateList)
      console.log(this.dateList, this.value)
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  .pickerType {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    .type {
      height: 32px;
      line-height: 32px;
      font-size: 20px;
      padding: 0 30px;
      margin: 0 5px;
      background: #FFFFFF;
      border-radius: 5px;
      border: 1px solid #6176D0;
      cursor: pointer;
    }

    .active_type {
      background: linear-gradient(180deg, #6176D0 0%, #93C9FF 100%);
      color: #ffffff;
    }
  }

  
}

.my-custom-datepicker {
  ::v-deep .el-input__icon {
    display: none;
  }
}
</style>
